<template>
  <div class="tablecou">
        <div class="search">
         <el-form inline="true" label-width="900">
               <el-form-item label="姓名：">
                   <el-cascader :options="options" clearable></el-cascader>
                   <el-button   type="primary" @click="searchTable">查询</el-button>
                   </el-form-item>
               </el-form>
       </div>

      <div class="table" style="height: 370px">
        <el-table :data="Table.tableData"  style="width: 100%" height="440"> 
        <el-table-column prop="studentid" label="学号" width="150"></el-table-column>
        <el-table-column prop="name"      label="姓名" width="80"></el-table-column>
        <el-table-column prop="class"     label="年级班级专业"  width="140"></el-table-column>
        <el-table-column prop="score"     label="分数" width="100"></el-table-column>
        <el-table-column prop="credits"   label="学分" width="100"></el-table-column>
        <el-table-column prop="gpa"       label="绩点" width="100"></el-table-column>
        <el-table-column prop="pass"      label="是否通过" width="100"></el-table-column>
        <el-table-column fixed="right" label="操作" width="260">
                          <template slot-scope="scope">
                              <el-button @click="viewDrawer(scope.row)" icon="el-icon-view" type="text" size="small">查看</el-button>
                              <el-button @click="editorDrawer(scope.row)" icon="el-icon-edit" type="text" size="small">编辑</el-button>
                              <el-button @click="deleClick(scope.row)" icon="el-icon-delete" type="text" size="small">删除</el-button>
                          </template>
                          </el-table-column>
      </el-table>
      </div>
      <el-dialog
        :title="`${Dialog.title}学生`"
        :visible.sync="Dialog.dialogVisible"
        width="500">
        <span>
          <el-form :model="Dialog.formmsg" :disabled="Dialog.view"  label-width="100px"  >
                    <el-form-item  label="学号：" prop="formmsg.studentid" label-width="380" >
                    <el-input style="width:380px" :disabled="Dialog.editor" v-model="Dialog.formmsg.studentid"  ></el-input>
                    </el-form-item>
                    <el-form-item label="姓名：" prop="name" label-width="120">
                    <el-input style="width:380px" :disabled="Dialog.editor" v-model="Dialog.formmsg.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="班级：" prop="class" label-width="380">
                    <el-input style="width:380px" :disabled="Dialog.editor" v-model="Dialog.formmsg.class" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="成绩："  label-width="380" >
                      <el-col :span="11">
                      <el-slider style="width:380px"   v-model="Dialog.formmsg.score" show-input> </el-slider>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="学分："  label-width="380" >
                      <el-col :span="11">
                    <el-slider style="width:380px"   v-model="Dialog.formmsg.credits"  show-input> </el-slider>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="绩点："  label-width="380" >
                      <el-col :span="11">
                      <el-slider style="width:380px"   v-model="Dialog.formmsg.gpa" show-input> </el-slider>
                      </el-col>
                    </el-form-item>
                </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="Dialog.dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="Dialog.dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      
  </div>
</template>

<script>
    export default {
        data() {
          return {
            Dialog:{
                title:"",
                view:false,
                formmsg: {
                  studentid:'',
                  name:'',
                  class:'',
                  score:'',
                  credits:'',
                  gpa:'',
                  pass:'',
                },
                formmsgrules:[],
                editor:true,
                dialogVisible:false,
            },
            title:"",
            formmsg:{},
            dialogVisible:false,
            options: [{
                value: 'JSJ',
                label: '计算机与信息工程学院',
                children: [{
                  value: 'ruanjiangongcheng',
                  label: '软件工程',
                  children: [{
                    value: 'Afreshman',
                    label: '大一'
                  },{
                    value: 'Asophomore',
                    label: '大二'
                  },{
                    value: 'junnior',
                    label: '大三',
                    children: [{
                      value: 'renjijiaohu',
                      label: '人机交互',
                    }]
                  }, {
                    value: 'senior',
                    label: '大四'
                  },]
                }, ]
              },
              ],
            Table:{
              currentPage:0,
              total:100,
              tableHeight:370,
              tableData:[]
            },
          }
        },
        mounted(){
        this.getData()
        },
        methods:{
          async getData(){
              this.Table.tableData = [];
              let data = await this.$api.CouData.doGet();
              // console.log(data.data);
              data = await this.$api.CouData.doGet()
              const s = data.data.split("\r\n")
                  this.Table.total = parseInt(s[0]);
                  const num = 0;
                  for (let i in s){
                      if (i <= num  || s[i] === '')continue;
                      const course = s[i].split(",")
                      const formInline ={
                          studentid:course[0],
                          name:course[1],
                          class:course[2],
                          score:course[3],
                          credits:course[4],
                          gpa:course[5],
                          pass:course[6]==1?"是":"否",
                      }
                      this.Table.tableData.push(formInline);
                  }
          },
          formatTooltip(val) {
            return val / 100;
          },
          viewDrawer(row){
            this.Dialog.formmsg = row;
            this.Dialog.dialogVisible = true
            this.Dialog.view = true
            this.Dialog.title = "查看"
          },
          editorDrawer(row){
             this.Dialog.formmsg = row;
             this.Dialog.dialogVisible = true
             this.Dialog.view = false
             this.Dialog.title = "编辑"
           },
          deleClick(row){
                this.$confirm(`您是否确认删除【${row.name}】学生?`, "温馨提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.Table.tableData.splice(this.Table.tableData.indexOf(row),1)
                    this.$message({showClose: true,message:"删除成功",type: "success"});
                });
          },
          handleClick(row) {
            console.log(row);
          }
      },
}
</script>

<style lang="scss" scoped>
.tablecou{
  height: 450px;
  .search{
    height: 80px;
  }
  .table{
    height: 470px;
  }
}
</style>